<template>
  <div>
    取值：{{msg}}
    <h3>遍历</h3>
    <ul>
      <li v-for="(item,index) in list" :key="item.id">
        {{index}}-{{item.id}}-{{item.name}}-{{item.age}}
      </li>
    </ul>
    <ul v-if="isShow">
      <li v-for="(item) in list" :key="item.id">
        {{item.id}}-{{item.name}}-{{item.age}}
      </li>
    </ul>
    <h3>if-else</h3>
    <div v-if="age<18">未成年</div>
    <div v-else>已成年</div>  
    <h3>if-else-if-else</h3>
    <div v-if="age<18">未成年</div>
    <div v-else-if="age==18">刚满十八岁</div>
    <div v-else>已成年</div>
    <button @click="handleClick">点击我</button>
    <m-article title="我是标题1" :list="articleList1"></m-article>
    <m-article title="我是标题2" :list="articleList2"></m-article>
    <Course87/>
    <Course88/>
    <Course89/>
    <Course810/>
    <Course811/>
  </div>
</template>

<script>
import Article from './components/Article.vue'
import Course87 from './components/Course8-7.vue'
import Course88 from './components/Course8-8.vue'
import Course89 from './components/Course8-9.vue'
import Course810 from './components/Course8-10.vue'
import Course811 from './components/Course8-11.vue'

export default {
  name: 'App',
  components: {
    "m-article": Article,
    Course87,
    Course88,
    Course89,
    Course810,
    Course811
  },
  data() {
    return {
      msg: "我是中国人",
      list: [
        {id: 1,name: "张三",age: 18},
        {id: 2,name: "李四",age: 19},
        {id: 3,name: "王五",age: 20}
      ],
      articleList1: [
        {id: 1,title: '我是文章标题1'},
        {id: 2,title: '我是文章标题2'},
        {id: 3,title: '我是文章标题3'}
      ],
      articleList2: [
        {id: 4,title: '我是文章标题21'},
        {id: 5,title: '我是文章标题22'},
        {id: 6,title: '我是文章标题23'}
      ],
      isShow: true,
      age: 18
    }
  },
  methods: {
    handleClick() {
      console.log("点我")
      this.isShow = !this.isShow
    }
  }
}
</script>

<style>

</style>
